:local(.loginform) {
    width: 410px;
    height: 500px;
    background-color: #FFFFFF;
    position: absolute;
    left:50%;
    top: 50%;
    margin-top: -250px;
    margin-left: -205px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    .header {
        height: 100px;
        font-size: 24.5px;
        color: #5e6166;
        text-align: center;
        line-height: 100px;
    }

    .content {
        text-align: center;

        .userinfo {
            width: 305px;
            height: 40px;
            background-color: #eeeeee;
            border-bottom-left-radius: 5px;
            border-top-left-radius: 5px;
            display: inline-block;
            border-radius: 5px;
            margin: 15px 0;
            position: relative;

            :global(.onCapsLock) {
                width: 167px;
                height: 65px;
                position: absolute;
                left: 0;
                top: 20px;
            }

            .erromessage {
                color: #ff6969;
                font-size: 17px;
                position: absolute;
                top: -27px;
            }

            span {
                width: 36px;
                height: 100%;
                display: inline-block;
                vertical-align: middle;
                border-bottom-left-radius: 5px;
                border-top-left-radius: 5px;
            }

            span.phone {
                background: url(../../../resources/login-telephone.png) no-repeat center center;
                background-color: #dedede;
            }

            span.password {
                background: url(../../../resources/login-password.png) no-repeat center center;
                background-color: #dedede;

            }

            input {
                border: 0px;
                width: 259px;
                background-color: #eeeeee;
                padding-left: 10px;
                outline:none;
                font-size: 17px;
                vertical-align: middle;
                height: 38px;
                border-top-right-radius: 5px;
                border-bottom-right-radius: 5px;
            }
        }

        .message {
            width: 305px;
            height: 30px;
        }

        .code_content {
            display: inline-block;
            width: 305px;
            text-align: left;

            .code {
                height: 40px;
                background-color: #eeeeee;
                border-bottom-left-radius: 5px;
                border-top-left-radius: 5px;
                display: inline-block;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
                margin: 15px 0;
            }
           

            span.code_icon {
                width: 36px;
                height: 100%;
                display: inline-block;
                vertical-align: middle;
                border-bottom-left-radius: 5px;
                border-top-left-radius: 5px;
                background: url(../../../resources/login_code.png) no-repeat center center;
                background-color: #dedede;
            }
            input {
                border: 0px;
                width: 100px;
                background-color: #eeeeee;
                padding-left: 10px;
                outline:none;
                font-size: 17px;
                vertical-align: middle;
                height: 38px;
                border-top-right-radius: 5px;
                border-bottom-right-radius: 5px;
            }

            a {
                color: #5e6166;
                font-size: 17px;
                display: inline-block;
                vertical-align: bottom;
                margin-left: 7px;
            }

            img {
                margin-left: 7px;
                vertical-align: middle;
                width: 94px;
            }
        }

        .remenber {
            text-align: justify;
            width: 305px;
            display: inline-block;
            margin-top: 10px;

            span {
                background: url("../../../resources/login_check.png") no-repeat left center;
                font-size: 16px;
                color: #5e6166;
                padding-left: 23px;
                display: inline-block;
                cursor: pointer;
            }

            span.checked {
                background: url("../../../resources/login_checked.png") no-repeat left center;
            }

            a {
                font-size: 16px;
                color: #64dcdc;
                float: right;
            }
        }

    }

    .footer {
        height: 125px;
        position: absolute;
        width: 100%;
        bottom: 0px;
        text-align: center;

        .btn_login {
            color: #FFFFFF;
            font-size: 18px;
            width: 305px;
            height: 50px;
            background-color: #64dcdc;
            text-decoration: none;
            display: inline-block;
            line-height: 50px;
            border-radius: 5px;

            &[disabled] {
                opacity: 0.6;
            }

            &.normal:hover {
                background-color: #66E8E8;
            }

            &.normal:active {
                background-color: #50BFBF;
            }
        }

        p {
            font-size: 15px;
            color: #5e6166;
            margin-top: 10px;
        }
    }
}
